<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

<html lang="en">
<head>
  <title>Introspy HTML Report</title>

  <!-- Bootstrap, handlebars.js and jquery -->
  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
  <script src="handlebars.js" type="text/javascript"></script>
  <script src="jquery.min.js" type="text/javascript"></script>
  <script src="bootstrap/js/bootstrap.min.js"></script>

  <!-- Handlebar.js template to display a list of tracedCalls -->
  <script id="tracedCalls-template" type="text/x-handlebars-template">
  <div class="accordion">
    {{#each this.calls}}
      <div class="{{toHTMLClassAttr this.group}} {{toHTMLClassAttr this.subgroup}} accordion-group tracedCall">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" href="#call{{this.callId}}{{../tabId}}">
            {{this.callId}}: {{this.clazz}} {{this.method}}
          </a>
        </div>
        <div id="call{{this.callId}}{{../tabId}}" class="accordion-body collapse">
          <div class="accordion-inner">
            Arguments: <pre>{{printArguments this.argsAndReturnValue}}</pre>
            Return Value: <pre>{{printReturnValue this.argsAndReturnValue}}</pre>
          </div>
        </div>
      </div>
    {{/each}}
  </div>
  </script>

  <!-- Handlebar.js template to display the findings -->
  <script id="findings-template" type="text/x-handlebars-template">
  <div class="accordion">
    {{#each this.findings.findings}}
      <div class="accordion-group">
        <div class="accordion-heading">
          <a class="accordion-toggle" data-toggle="collapse" href="#{{toHTMLClassAttr signature.title}}">
            <h3>{{signature.title}}</h3>
          </a>
        </div>
        <div id="{{toHTMLClassAttr signature.title}}" class="accordion-body collapse">
          <div class="accordion-inner">
            <h4>Severity</h4><p>{{signature.severity}}</p>
            <h4>Description</h4><p>{{signature.description}}</p>
            <h4>Relevant function calls</h4>
            {{> tracedCalls}}
          </div>
        </div>
      </div>
    {{/each}}
  </div>
  </script>

  <!-- Handlebar.js template for the show/hide bar -->
  <script id="showHide-template" type="text/x-handlebars-template">
      <!-- Show all & hide all buttons -->
      <button class="btn btn-small" onclick="$('#tab1').find('div.tracedCall').show();$('#showhidebar').find('.icon-remove').hide();$('#showhidebar').find('.icon-ok').show();">Show All</button>
      <button class="btn btn-small" onclick="$('#tab1').find('div.tracedCall').hide();$('#showhidebar').find('.icon-ok').hide();$('#showhidebar').find('.icon-remove').show();">Hide All</button>
      {{#each groups}}
      <!-- main goup button -->
      <div class="btn-group">
        <button class="btn btn-small">{{name}}</button>
        <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
        <!-- dropdown menu links (subgroups) -->
          {{#each subgroups}}
          <li><a onclick="$('#tab1').find('.{{toHTMLClassAttr name}}').toggle();$('#showhidebar').find('.icon{{toHTMLClassAttr name}}').toggle();">
            <!-- OK/NOK icons to toggle when showing or hiding API subgroups -->
            <i class="icon{{toHTMLClassAttr this.name}} icon-ok"></i>
            <i style="display:none" class="icon{{toHTMLClassAttr this.name}} icon-remove"></i>
            {{name}} - {{countClassElements this.name}}
            </a>
          </li>
          {{/each}}
        </ul>
      </div>
      {{/each}}
  </script>

  <!-- Import data generated by the Analyzer -->
  <script src="tracedCalls.js" type="text/javascript"></script>
  <script src="findings.js" type="text/javascript"></script>
  <script src="apiGroups.js" type="text/javascript"></script>

</head>

<body>
  <!-- Actual Page -->
  <!-- Navigation bar -->
  <div class="tabbable" style="width:800px;margin:auto;">
  <div style="position:fixed;width:800px;margin:auto;background-color:white;border-bottom-style:solid;border-width:1px;z-index:10;">
    <!-- Nav bar -->
    <ul class="nav nav-list">
      <li class="active"><a href="#tab1" data-toggle="tab" onclick="$('#showhidebar').show();"><i class="icon-book"></i> Traced Calls</a></li>
      <!-- <li><a href="#tab2" data-toggle="tab" onclick="$('#showhidebar').hide();"><i class="icon-warning-sign"></i> Potential Findings</a></li> -->
      <li id="showhidebar"><a style="float:left;margin-right:20px;margin-bottom:5px;"><i class="icon-eye-open"></i> Show / Hide  </a>
        <!-- Show/hide bar -->
        <div id="showhidebarcontent"></div>
      </li>
    </ul>

    <div></div>
  </div>
    <div class="tab-content">
      <!-- Actual content of tab1: list of traced calls -->
      <div class="tab-pane active" id="tab1">
        <div id="tab1content" style="margin-top:100px;"></div>
      </div>
      <!-- Actual content of tab2: list of vulnerabilities -->
      <div class="tab-pane" id="tab2">
        <div id="tab2content" style="margin-top:60px;"></div>
      </div>
    </div>
  </div>
  <!-- Page Ends -->

    <!-- Populate the page with content -->
  <script type="text/javascript">

  // Compile the templates
  var tracedCallsTemplate = Handlebars.compile($("#tracedCalls-template").html());
  // Register this template as partial so we can reuse it when printing the findings
  Handlebars.registerPartial("tracedCalls", tracedCallsTemplate);

  var findingsTemplate = Handlebars.compile($("#findings-template").html());

  var showHideTemplate = Handlebars.compile($("#showHide-template").html());

  // Handlers used by the templates
  Handlebars.registerHelper('printArguments', function(argsAndReturnValue) {
    // Pretty print JSON
    return JSON.stringify(argsAndReturnValue.arguments, undefined, 2);
  });

  Handlebars.registerHelper('printReturnValue', function(argsAndReturnValue) {
    return JSON.stringify(argsAndReturnValue.returnValue, undefined, 2);
  });

  function toHTMLClassAttr(attrValue) {
    // Remove spaces so it's a valid class HTML attribute
    return attrValue.toLowerCase().replace(/\s/g,'');
  }
  Handlebars.registerHelper('toHTMLClassAttr', function(groupname) {
    return toHTMLClassAttr(groupname);
  });

  function countClassElements(className) {
    // Count the number of elements with the given class name within tab1
    return $('#tab1').find('.' + toHTMLClassAttr(className)).length;
  }
  Handlebars.registerHelper('countClassElements', function(className) {
    return countClassElements(className);
  });


  // Populate tab1 with the traced calls
  document.getElementById("tab1content").innerHTML = tracedCallsTemplate({tabId: 'tab1', calls: tracedCalls.calls});

  // Populate tab2 with the findings
  document.getElementById("tab2content").innerHTML = findingsTemplate({tabId: 'tab2', findings: findings});

  // Populate the show hide bars with API groups
  document.getElementById("showhidebarcontent").innerHTML = showHideTemplate(apiGroups);
  </script>
</body>
</html>
